<template>
  <a-modal
    :title="`添加商品`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item
          label="商品" 
          :placeholder="`请至少输入一个字符`">
          <a-select
            show-search
            :value="value ? value : undefined"
            :placeholder="`请至少输入一个字符`"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option v-for="d in prodOption" :key="d.inventoryId">
              {{ d.goodName }} {{ d.phoneCode1 }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="售价">
          <a-input
            v-decorator="['amount', { initialValue: '0' }]"
            addonAfter="元"
            placeholder="请输入售价"
            name="amount"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import pick from 'lodash.pick'
import { getInventoryListByPhoneCdeUsingGET } from '@/api/api/qiantaizhangwu.ts'
// 表单字段
const fields = ['amount', 'id']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
    }
    return {
      prodOption: [],
      value: undefined,
      form: this.$form.createForm(this),
    }
  },
  created() {
    fields.forEach((v) => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    handleSearch(value) {
      this.handleProd(value)
    },
    handleChange(value) {
      this.value = value
      this.form.setFieldsValue({amount:this.prodOption.find((item) => {
          return item.inventoryId == value
        }).commCost,})
      this.$emit('goodsId', {
        inventoryId: this.prodOption.find((item) => {
          return item.inventoryId == value
        }).inventoryId,
        goodName: this.prodOption.find((item) => {
          return item.inventoryId == value
        }).goodName,
        phoneCode1: this.prodOption.find((item) => {
          return item.inventoryId == value
        }).phoneCode1,
      })
    },
    handleProd(params) {
      getInventoryListByPhoneCdeUsingGET({
        phoneCodeStr: params,
        status:1,
        storeId: this.$route.params.id,
      })
        .then((res) => {
          this.prodOption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
  },
}
</script>